---
layout: default
---
<link href="css/fontawesome/css/all.css" rel="stylesheet" type="text/css" media="all">
<link href="css/fontawesome/css/fontawesome.min.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<a id="backtotop_button"><i class="fas fa-arrow-to-top" style="color: white"></i></a>
<iframe id="susi-chat" data-src="https://chat.susi.ai/">
  <p>Your browser does not support iframes.</p>
</iframe>
<span id="susi-close" >
  <i class="fa fa-close" style="background-color: rgb(66, 133, 244);color: #fff;font-size: 24px;"></i>
</span>
<section class="cover fullscreen image-slider slider-all-controls controls-inside parallax">
  <ul class="slides">
    <li class="overlay image-bg bg-light">
      <div class="background-image-holder">
        <img alt="image" class="background-image" src="img/home23.jpg" />
      </div>
      <div class="container v-align-transform">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-1 text-center" id="new_text">
            <h1 class="mb40 mb-xs-16 large texts animated fadeInDown delay-2s" id="new_text">
              Making our way <br> to Greatness 
            </h1>
            <h6 class="uppercase mb16 texts animated fadeInDown delay-2s" id="new_text">
              Creating collaborative open-source technologies.
            </h6>
            <p class="lead mb40 texts animated fadeInDown delay-2s" id="new_text">
              Connecting Open Tech Communities all over Asia with Developers and
              Creators <br />
              in the FOSSASIA Network.
            </p>
            <a class="btn btn-lg btn-filled" href="https://fossasia.org">Start Exploring</a>
          </div>
        </div>
        <!-- end of row -->
      </div>
      <!-- end of container -->
    </li>
    <li class="overlay image-bg">
      <div class="background-image-holder">
        <img alt="image" class="background-image" src="img/home22.jpg" />
      </div>
      <div class="container v-align-transform">
        <div class="row">
          <div class="col-sm-offset-1 text-center col-sm-10">
            <h1 class="mb40 mb-xs-16 large texts" id="new_text">
              Google Code-In with FOSSASIA 2018
            </h1>
            <h6 class="uppercase mb16 texts" id="new_text">
              Offering a range of exciting tasks involving
            </h6>
            <p class="lead mb40 texts" id="new_text">
              Coding, Documentation, Outreach, Design, Quality Control <br />and
              much more!
            </p>
            <a class="btn btn-lg btn-filled" href="https://codein.withgoogle.com/organizations/fossasia/">Participate</a>
          </div>
        </div>
        <!-- end of row -->
      </div>
      <!-- end of container -->
    </li>
    <li class="overlay image-bg">
      <div class="background-image-holder">
        <img alt="image" class="background-image" src="img/home21.jpg" />
      </div>
      <div class="container v-align-transform">
        <div class="row">
          <div class="col-sm-offset-1 text-center col-sm-10">
            <h1 class="mb40 mb-xs-16 large texts" id="new_text">
              FOSSASIA builds exciting Projects
            </h1>
            <h6 class="uppercase mb16 texts" id="new_text">All open source</h6>
            <p class="lead mb40 texts" id="new_text">
              Even you can contribute <br />
            </p>
            <a class="btn btn-lg btn-filled" href="https://github.com/fossasia">Explore Projects</a>
          </div>
        </div>
        <!-- end of row -->
      </div>
    </li>
    <li class="overlay image-bg">
      <div class="background-image-holder">
        <img alt="image" class="background-image" src="img/home20.webp" onerror="this.onerror=null; this.src='img/home20.jpg'" />
      </div>
      <div class="container v-align-transform">
        <div class="row">
          <div class="col-sm-offset-1 text-center col-sm-10">
            <h1 class="mb40 mb-xs-16 large texts" id="new_text">
              Last Year, we broke Google Code-In records
            </h1>
            <h6 class="uppercase mb16 texts" id="new_text">
              With over 900 students and 90 mentors
            </h6>
            <p class="lead mb40 texts" id="new_text">
              FOSSASIA had over 1500 completed tasks... stunning isn't it?!
              <br />
            </p>
            <a class="btn btn-lg btn-filled" href="https://opensource.googleblog.com/2018/01/google-code-in-2017-winners.html">Learn
              More</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <!-- end of container -->
</section>
<section class="pb0" id="welcome">
  <div class="container-fluid">
    <div class="row mb80 mb-xs-0">
      <div class="col-md-8 col-md-offset-2 text-center reveal-content">
        <h2>What is open source?</h2>
        <p>
          In general, open source refers to any program whose source code is
          made available for use or modification as users or other developers
          see fit. Open source software is usually developed as a public
          collaboration and made freely available.
        </p>
      </div>
    </div>
    <!-- end of row -->
    <div class="row v-align-children">
      <div class="col-md-6 col-md-offset-1 col-sm-12 col-sm-offset-1 reveal-content">
        <h2>What is FOSSASIA?</h2>
        <p>
          FOSSASIA develops software and hardware and cooperates with Open Tech
          projects. Please check out our Github and FOSSASIA Labs.
        </p>
        <a class="btn btn-lg" href="https://fossasia.org/" target="_blank" rel="noopener">Explore FOSSASIA 🌏</a>
      </div>
      <div class="col-md-6 col-sm-9 text-center mb-xs-24">
        <img alt="Screenshot" src="img/open-source.jpg" id="opensource_image">
      </div>
    </div>
  </div>
  <!-- end of container -->
</section>

<section id="connect">
  <hr style="padding-bottom: 60px;">
  <div class="container-fluid" id="social_box">
    <div class="row mb-xs-0">
      <img src="img/social_icon.jpg" class="col-md-4 col-sm-12">
      <div class="col-md-7 col-sm-12 text-center reveal-content">
        <h2>Connect with FOSSASIA on Social Media</h2>
        <p>Be sure to follow us on social media!</p>
        <p id="social_icons" class="large">
          <a href="https://gitter.im/fossasia/fossasia" title="Gitter" target="_blank" class="fab fa-gitter lgi" rel="noopener"></a>
          <a href="https://github.com/fossasia" title="GitHub" target="_blank" class="ti-github lgi" rel="noopener"></a>
          <a href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" title="YouTube" target="_blank" class="ti-youtube lgi" rel="noopener"></a>
          <a href="https://flickr.com/photos/fossasia" title="Flickr" target="_blank" class="ti-flickr lgi" rel="noopener"></a>
          <a href="https://www.facebook.com/fossasia/" title="Facebook" target="_blank" class="ti-facebook lgi" rel="noopener"></a>
          <a href="https://twitter.com/fossasia" title="Twitter" target="_blank" class="ti-twitter lgi" rel="noopener"></a>
          <a href="https://www.instagram.com/fossasia/" title="Instagram" target="_blank" class="fab fa-instagram lgi" rel="noopener"></a>
          <a href="https://www.linkedin.com/groups/FOSSASIA-3762811" title="LinkedIn" target="_blank" class="ti-linkedin lgi" rel="noopener"></a>
          <a href="https://plus.google.com/108920596016838318216" title="Google+" target="_blank" class="fab fa-google-plus-g lgi" rel="noopener"></a>
          <a href="https://codein.withgoogle.com/organizations/fossasia/" title="GCI" target="_blank" class="ti-settings lgi" rel="noopener"></a>
        </p>
      </div>
    </div>
  </div>
</section>



<!--FOSSASIA Album-->
<section class="bg-secondary spacing-0 lazy-section">
  <div class="container-fluid" id="memories">
    <div class="row">
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/1.webp" data-lightbox="Gallery">
          <img id="memory1" class="memories_img img-fluid lazy" data-src="img/PastMemories/1.webp" onerror="this.onerror=null; this.src='img/PastMemories/1.jpg'">
        </a>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/2.webp" data-lightbox="Gallery">
          <img id="memory2" class="memories_img img-fluid lazy" data-src="img/PastMemories/2.webp" onerror="this.onerror=null; this.src='img/PastMemories/2.jpg'">
        </a>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/3.webp" data-lightbox="Gallery">
          <img id="memory3" class="memories_img img-fluid lazy" data-src="img/PastMemories/3.webp" onerror="this.onerror=null; this.src='img/PastMemories/3.jpg'">
        </a>
      </div>
      <div class="col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/4.webp" data-lightbox="Gallery">
          <img id="memory4" class="memories_img img-fluid lazy" data-src="img/PastMemories/4.webp" onerror="this.onerror=null; this.src='img/PastMemories/4.jpg'">
        </a>
      </div>
      <div class="col-md-2 spacing-0">
        <a href="img/PastMemories/5.webp" data-lightbox="Gallery">
          <img id="memory5" class="memories_img img-fluid lazy" data-src="img/PastMemories/5.webp" onerror="this.onerror=null; this.src='img/PastMemories/5.jpg'">
        </a>
      </div>
      <div class="col-md-2 spacing-0">
        <a href="img/PastMemories/6.webp" data-lightbox="Gallery">
          <img id="memory6" class="memories_img img-fluid lazy" data-src="img/PastMemories/6.webp" onerror="this.onerror=null; this.src='img/PastMemories/6.jpg'">
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/7.webp" data-lightbox="Gallery">
          <img id="memory7" class="memories_img img-fluid lazy" data-src="img/PastMemories/7.webp" onerror="this.onerror=null; this.src='img/PastMemories/7.jpg'">
        </a>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/8.webp" data-lightbox="Gallery">
          <img id="memory8" class="memories_img lazy" data-src="img/PastMemories/8.webp" onerror="this.onerror=null; this.src='img/PastMemories/8.jpg'">
        </a>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/9.webp" data-lightbox="Gallery">
          <img id="memory9" class="memories_img lazy" data-src="img/PastMemories/9.webp" onerror="this.onerror=null; this.src='img/PastMemories/9.jpg'">
        </a>
      </div>
      <div class="col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/10.webp" data-lightbox="Gallery">
          <img id="memory10" class="memories_img lazy" data-src="img/PastMemories/10.webp" onerror="this.onerror=null; this.src='img/PastMemories/10.jpg'">
        </a>
      </div>
      <div class="col-md-2 spacing-0">
        <a href="img/PastMemories/11.webp" data-lightbox="Gallery">
          <img id="memory11" class="memories_img lazy" data-src="img/PastMemories/11.webp" onerror="this.onerror=null; this.src='img/PastMemories/11.jpg'">
        </a>
      </div>
      <div class="col-md-2 spacing-0">
        <a href="img/PastMemories/12.webp" data-lightbox="Gallery">
          <img id="memory12" class="memories_img lazy" data-src="img/PastMemories/12.webp" onerror="this.onerror=null; this.src='img/PastMemories/12.jpg'">
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/13.webp" data-lightbox="Gallery">
          <img id="memory13" class="memories_img lazy" data-src="img/PastMemories/13.webp" onerror="this.onerror=null; this.src='img/PastMemories/13.jpg'">
        </a>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/14.webp" data-lightbox="Gallery">
          <img id="memory14" class="memories_img lazy" data-src="img/PastMemories/14.webp" onerror="this.onerror=null; this.src='img/PastMemories/14.jpg'">
        </a>
      </div>
      <div class="col-xs-4 col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/15.webp" data-lightbox="Gallery">
          <img id="memory15" class="memories_img lazy" data-src="img/PastMemories/15.webp" onerror="this.onerror=null; this.src='img/PastMemories/15.jpg'">
        </a>
      </div>
      <div class="col-sm-3 col-md-2 spacing-0">
        <a href="img/PastMemories/16.webp" data-lightbox="Gallery">
          <img id="memory16" class="memories_img lazy" data-src="img/PastMemories/16.webp" onerror="this.onerror=null; this.src='img/PastMemories/16.jpg'">
        </a>
      </div>
      <div class="col-md-2 spacing-0">
        <a href="img/PastMemories/17.webp" data-lightbox="Gallery">
          <img id="memory17" class="memories_img lazy" data-src="img/PastMemories/17.webp" onerror="this.onerror=null; this.src='img/PastMemories/17.jpg'">
        </a>
      </div>
      <div class="col-md-2 spacing-0">
        <a href="img/PastMemories/18.webp" data-lightbox="Gallery">
          <img id="memory18" class="memories_img lazy" data-src="img/PastMemories/18.webp" onerror="this.onerror=null; this.src='img/PastMemories/18.jpg'">
        </a>
      </div>
    </div>
    <div class="align-middle" id="memories_div">
      <i class="glyphicon glyphicon-camera" id="memories_icon"></i><br>
      <h1 id="memories_heading">FOSSASIA Album</h1><br>
      <h3 id="memories_link">Follow our photostream on
        <a id="flickr" href="https://www.flickr.com/photos/fossasia/" target="_blank" rel="noopener">flickr</a>
      </h3>
    </div>
  </div>
</section>

<!-- Winners, Finalists & Contrinution Winners-->
<section class="lazy-section">
  <div class="container">
    <div class="row mb64 mb-xs-24">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2 class="section-heading">Winners</h2>
      </div>
    </div>
    <!-- end of row -->
    <div class="container col-md-offset-3 text-center">
      {% for student in site.data.students %}
      {% if student.winner %}
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 text-center">
        <div class="card single-mentor">
          {% if student.image %}
          <img class="mentor-img lazy reveal-content" data-src="img/students/{{student.image}}" alt="{{ student.name }}" />
          {% else %}
          <img src="img/mentors/member.png" alt="{{ student.name }}" /> {% endif
          %}
          <p class="student_name reveal-content">{{ student.name }}</p>

          <ul class="list-inline social-list social-overlay-list">
            {% if student.github %}
            <a href="https://github.com/{{student.github}}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-github"></i>
            </a>
            {% endif %} {% if student.twitter %}

            <a href="https://twitter.com/{{ student.twitter }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-twitter-alt"></i>
            </a>
            {% endif %} {% if student.blog %}

            <a href="https://{{ student.blog }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-rss"></i>
            </a>
            {% endif %} {% if student.facebook %}

            <a href="https://facebook.com/{{ student.facebook }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-facebook"></i>
            </a>
            {% endif %}
          </ul>
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
  <div class="container">
    <div class="row mb64 mb-xs-24">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2 class="section-heading">Finalists</h2>
      </div>
    </div>
    <!-- end of row -->
    <div class="container text-center">
      {% for student in site.data.students %}
      {% if student.finalist %}
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 text-center">
        <div class="card single-mentor">
          {% if student.image %}
          <img class="mentor-img lazy reveal-content" data-src="img/students/{{student.image}}" alt="{{ student.name }}" />
          {% else %}
          <img src="img/mentors/member.png" alt="{{ student.name }}" /> {% endif
          %}
          <p class="student_name reveal-content">{{ student.name }}</p>

          <ul class="list-inline social-list social-overlay-list">
            {% if student.github %}
            <a href="https://github.com/{{student.github}}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-github"></i>
            </a>
            {% endif %} {% if student.twitter %}

            <a href="https://twitter.com/{{ student.twitter }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-twitter-alt"></i>
            </a>
            {% endif %} {% if student.blog %}

            <a href="https://{{ student.blog }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-rss"></i>
            </a>
            {% endif %} {% if student.facebook %}

            <a href="https://facebook.com/{{ student.facebook }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-facebook"></i>
            </a>
            {% endif %}
          </ul>
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </div>
    <!-- end of row -->
  </div>
</section>


<section class="bg-secondary">
  <div class="container" id="videos">
    <!-- end of row -->
    <div class="row v-align-children">
      <div class="col-md-7 col-sm-6 text-center mb-xs-24">
        <video controls="" preload="metadata">
          <source src="video/fossasia.mp4" type="video/mp4" />
        </video>
      </div>
      <div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1 reveal-content">
        <h3>FOSSASIA Attracting Students</h3>
        <p>
          The video is made is by one of our students during the competition
          itblank!
        </p>
        <a class="btn btn-lg" href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank" rel="noopener">Our
          Youtube Channel</a>
      </div>
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</section>
<!-- Susi section -->
<section class="lazy-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2>
          Meet SUSI.AI, Your Artificial Intelligence for Personal Assistants, Robots, Help Desks and Chatbots.
        </h2>
        <h2 class="section-sub-heading">Ask it questions. Tell it to do things. Always ready to help.</h2>
        <div id="start-susi" style="color:#e31d3b;display: block;">
          <i class='fas fa-play-circle' style='font-size:24px;vertical-align: middle;'></i>
            Start Chat
            <br>
        </div>
        <div id="susi-loading"><i class='fa fa-circle-o-notch fa-spin'></i>Loading</div>
        <div style="margin-top: 50px;font-size: 20px;">Visit   <a href="https://chat.susi.ai/overview"><img data-src="img/SUSI.AI.jpg" class="lazy" style="max-width: 80px;margin:0px 5px;"></a>   to see more</div>
       </div>
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</section>
<hr style="margin-top: -30px;">
<!-- Project section -->
<section class="lazy-section">
  <div class="container">
    <div class="row mb64 mb-xs-24">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2 class="section-heading">FOSSASIA | Projects</h2>
        <h2 class="section-sub-heading">Building future</h2>
        <a class="btn-filled btn" href="https://github.com/fossasia/">All our projects</a>

      </div>
    </div>

    {% for projects in site.data.orgprojects %}
    <div class="row v-align-children extra_padding_b">
      <div class="col-md-7 col-sm-6 text-center mb-xs-24">
        <img class="cast-shadow lazy" alt="Screenshot" data-src="img/{{projects.img}}" />
      </div>
      <div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1 reveal-content">
        <h3>{{projects.title}}</h3>
        <p>
          {{projects.desc}}
        </p>
        <a class="btn-filled btn" href="{{projects.github}}">Contribute</a>
        <a class="btn-filled btn" href="{{projects.try}}">Try</a>
      </div>
    </div>
    {% endfor %}

    <br />
    <!-- end of row -->
  </div>
  <!-- end of container -->
</section>

<!-- Videos Section -->
<section class="bg-secondary pb0">
  <div class="container">
    <div class="row mb64 mb-xs-24">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2 class="section-heading">Videos</h2>
        <h2 class="section-sub-heading">Discover</h2>
      </div>
    </div>
    <!-- end of row -->
 <div class="row mb80 mb-md-0">
      <div class="col-md-12 text-center w-100 v-align-children">
	{% for video in site.data.videos %}
		<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center">
		<h4><b>{{video.name}}</b> by <b>{{video.user}}</b></h4>	
        <div class="card single-mentor ytvideo" id="{{video.id}}" align="center">
      </div>
		</div>
          {% endfor %}
		</div>
	  </div>
      <!-- end of row -->
	  </div>
	<br>
</section>
<!-- Videos section -->
<section class="lazy-section">
  <div class="container-fluid" id="mentors">
    <div class="row mb64 mb-xs-24">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2 class="section-heading">Our Mentors</h2>
        <h2 class="section-sub-heading">Anytime, Anywhere. Just Ask</h2>
      </div>
    </div>
    <!-- end of row -->
    <div class="container">
      {% for mentor in site.data.mentors limit:30 %}

      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 text-center">
        <div class="card single-mentor">
          {% if mentor.image %}
          <img class="mentor-img lazy reveal-content" data-src="img/mentors/{{mentor.image}}" alt="{{ mentor.name }}" />
          {% else %}
          <img src="img/mentors/member.png" alt="{{ mentor.name }}" /> {% endif
          %}
          <p class="person-name reveal-content">{{ mentor.name }}</p>

          <ul class="list-inline social-list social-overlay-list">
            {% if mentor.github %}
            <a href="https://github.com/{{mentor.github}}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-github"></i>
            </a>
            {% endif %} {% if mentor.twitter %}

            <a href="https://twitter.com/{{ mentor.twitter }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-twitter-alt"></i>
            </a>
            {% endif %} {% if mentor.blog %}

            <a href="https://{{ mentor.blog }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-rss"></i>
            </a>
            {% endif %} {% if mentor.facebook %}

            <a href="https://facebook.com/{{ mentor.facebook }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-facebook"></i>
            </a>
            {% endif %}
          </ul>
        </div>
      </div>
      {% endfor %}
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</section>

<section class="lazy-section">
  <div class="container-fluid" id="students">
    <div class="row mb64 mb-xs-24">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2 class="section-heading">Students</h2>
        <h2 class="section-sub-heading">Now a part of lifelong learning institute</h2>
      </div>
    </div>
    <!-- end of row -->
    <div class="container">
      {% for student in site.data.students %}

      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 text-center">
        <div class="card single-mentor">
          {% if student.image %}
          <img class="mentor-img lazy reveal-content" data-src="img/students/{{student.image}}" alt="{{ student.name }}" />
          {% else %}
          <img src="img/mentors/member.png" alt="{{ student.name }}" /> {% endif
          %}
          <p class="student_name reveal-content">{{ student.name }}</p>

          <ul class="list-inline social-list social-overlay-list">
            {% if student.github %}
            <a href="https://github.com/{{student.github}}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-github"></i>
            </a>
            {% endif %} {% if student.twitter %}

            <a href="https://twitter.com/{{ student.twitter }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-twitter-alt"></i>
            </a>
            {% endif %} {% if student.blog %}

            <a href="https://{{ student.blog }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-rss"></i>
            </a>
            {% endif %} {% if student.facebook %}

            <a href="https://facebook.com/{{ student.facebook }}" class="icon-a" target="_blank" rel="noopener">
              <i class="ti-facebook"></i>
            </a>
            {% endif %}
          </ul>
        </div>
      </div>
      {% endfor %}
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</section>
<!-- Map -->
<section class="map hid">
  <div class="container-fluid">
    <div class="row mb64 mb-xs-24">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
        <h2 class="section-heading">Map</h2>
        <h2 class="section-sub-heading">Hope to see these markers at one place.</h2>
      </div>
    </div>
    <div id="map-overlay" class="container">
      <div id="map" align="center"></div>
    </div>
  </div>
</section>
<!-- Contributors -->
<section>
  <div class="container">
    <div class="row mb-xs-24 mb16">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center reveal-content">
        <h2 class="section-heading">Contributors</h2>
        <a class="btn btn-lg" href="https://labs.fossasia.org" target="_blank" rel="noopener">FOSSASIA Projects</a>
        <a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org" target="_blank" rel="noopener">Repository</a>
        <a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org/graphs/contributors" target="_blank" rel="noopener">Details
          of Our Contributors</a>
        <a class="btn btn-lg" href="https://blog.fossasia.org/open-source-developer-guide-and-best-practices-at-fossasia/"
          target="_blank" rel="noopener">How to contribute?</a>
      </div>
    </div>
    <!-- end of row -->
    <div class="row equal-row" id="contributors"></div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</section>
<section class="bg-secondary" id="latest-activities">
  <div class="container">
    <div class="row mb-xs-24 mb16">
      <div class="col-sm-12 col-md-10 col-md-offset-1 text-center reveal-content">
        <h2 class="section-heading">Latest Activites</h2>
        <a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org/issues" target="_blank">All Issues</a>
        <a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org/pulls" target="_blank">All Pull Requests</a>
        <a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org/pulse" target="_blank">View More</a>
        <a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org/graphs/contributors" target="_blank">Details
          of Our Contributors</a>
      </div>
    </div>
    <div class="latest-issues">
      <div class="issues-wrapper">
      </div>
    </div>
  </div>
</section>
<!-- thank you section -->
<div id="app" class="thank_you gradient-multi-hot"></div>
